﻿@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    @Styles.Render("~/Scripts/themes/bootstrap/easyuicss")
    @Scripts.Render("~/Scripts/EasyUiJs")
    <script type="text/javascript">
        $(function() {
            //1.加载菜单树
            $("#menuTree").tree({
                url: '/admin/system/GetPermissionListTree',
                onLoadSuccess: function(node, data) {
                    //调用方法 统一处理 Ajax获取的 json数据！
                    $.ProcessMessage(data);
                },
                onClick: function(node) {
                    newTab(node);
                    //alert(node.id + "," + node.text + "," + node.attributes.url);
                }
            });
        });
        //追加一个新的 Tab
        function newTab(treeNode) {
            var $tbs = $("#tbs");//获取tab容器
            //新根据 标题 判断 是否以存在 同名tab
            if ($tbs.tabs("exists", treeNode.text)) {
                $tbs.tabs("select", treeNode.text);
            } else {
                $tbs.tabs("add", {
                    title: treeNode.text,
                    content: newIframe(treeNode.attributes.url),
                    closable: true
                });
            }
        }
        /*返回一个iframe标签*/
        function newIframe(url) {
            var ifrStr = "<iframe src='" + url + "' style='width:100%;height:100%;border:1px solid #000;'></iframe>";
            return ifrStr;
        }
    </script>
</head>
<body class="easyui-layout">
    <div data-options="region:'north',split:true" style="height:100px; font-size:32px;">
        OA权限管理系统
    </div>
    <div data-options="region:'west',title:'菜单导航',split:true" style="width:240px;">
        <ul id="menuTree"></ul>
    </div>
    <div data-options="region:'center'" style="padding:5px;background:#eee;">
        <div id="tbs" class="easyui-tabs" data-options="fit:true,border:false">
        </div>

    </div>
</body>
</html>


